<template>
  <div class="entryFrom">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名:" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年龄:" prop="age">
            <el-input v-model="ruleForm.age"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="婚姻状况:" prop="marriage">
            <el-input v-model="ruleForm.marriage"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="文化程度:" prop="culture">
            <el-input v-model="ruleForm.culture"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="手机号码:" prop="phone">
            <el-input v-model="ruleForm.phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="就业信息:" prop="work" v-if="!active">
            <el-input v-model="ruleForm.work"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item label="角色分配:" prop="role" v-if="active">
            <el-select
              v-model="ruleForm.role"
              placeholder="可手动新增角色"
              allow-create
              filterable
              default-first-option
              class="select"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item label="性别:" prop="sex" style="text-align: left;">
            <el-radio v-model="ruleForm.sex" label="1">男</el-radio>
            <el-radio v-model="ruleForm.sex" label="2">女</el-radio>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="账号:" prop="account" v-if="active">
            <el-input v-model="ruleForm.account"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密码:" prop="password" v-if="active">
            <el-input v-model="ruleForm.password" :show-password="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!--  -->
      <el-row>
        <el-col>
          <el-form-item label="拍照:" v-if="!active">
            <Camera></Camera>
          </el-form-item>
        </el-col>
      </el-row>

      <!--  -->
      <el-row>
        <el-col>
          <el-form-item label="身份证:" v-if="!active">
            <ReadIDCard></ReadIDCard>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item v-if="!active">
        <el-button type="primary" @click="submitForm('ruleForm', ruleForm)">立即创建</el-button>
        <el-button type="warning" @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Camera from "./camera";
import ReadIDCard from "./readIDCard";
export default {
  props: ["active"],
  components: {
    Camera,
    ReadIDCard
  },
  data() {
    let checkPhone = (rule, value, callback) => {
      let reg = /^1[345789]\d{9}$/;
      if (!reg.test(value)) {
        callback(new Error("请输入11位手机号"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        name: "",
        age: "",
        marriage: "",
        culture: "",
        phone: "",
        work: "",
        sex: "1",
        email: "",
        role:'',
        account: "",
        password: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入正确姓名", trigger: "blur" },
          { min: 1, max: 5, message: "请输入正确姓名", trigger: "blur" }
        ],
        age: [
          { required: true, message: "请输入正确年龄", trigger: "blur" },
          { min: 1, max: 3, message: "请输入正确年龄", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            type: "number",
            validator: checkPhone,
            message: "请输入11位有效手机号号码",
            trigger: ["blur", "change"]
          }
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        account: [
          { required: true, message: "请输入有效账号", trigger: "blur" },
          { min: 1, max: 11, message: "请输入有效账号", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入有效密码", trigger: "blur" },
           { min: 5, max: 16, message: "请输入有效密码,最少为5位", trigger: "blur" }
        ]
      },
      headImgSrc:
        "https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2828954361,2900404127&fm=26&gp=0.jpg",
      options: [
        {
          value: "选项1",
          label: "培训主任"
        },
        {
          value: "选项2",
          label: "项目主任"
        },
        {
          value: "选项3",
          label: "录入员"
        },
        {
          value: "选项4",
          label: "老师"
        }
      ],
      value: ""
    };
  },
  methods: {
    submitForm(formName, ruleForm) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$store.commit("SET_MENU_CLCIK", ruleForm);
          this.$message({
            message: "创建成功",
            type: "success"
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 读取身份证按钮
    readIDCard() {
      this.showDialog = true;
    }
  }
};
</script>

<style lang="less" scope>
.entryFrom {
  display: flex;
  justify-content: center;
  .el-form {
    min-width: 500px;
    text-align: center;
    .el-row {
      margin: 16px 0;
      .el-col{
        padding:0
      }
    }
  }
}
.el-form-item {
  margin-bottom: 0;
}

.select{
  width:100%;
}
</style>